<template>
  <el-form label-width="80px" class="inputwidth">
    <el-row>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="学科">
              <el-select
                v-model="formData.subjectID"
                @change="queryDirtandTags"
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="试题类型">
              <el-select v-model="formData.questionType">
                <el-option
                  v-for="questionType in questionTypes"
                  :key="questionType.value"
                  :value="questionType.value"
                  :label="questionType.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="二级目录">
              <el-select v-model="formData.catalogID">
                <el-option
                  v-for="directory in directorys"
                  :value="directory.value"
                  :key="directory.value"
                  :label="directory.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="难度">
              <el-select v-model="formData.difficulty">
                <el-option
                  v-for="difficulty in difficultys"
                  :key="difficulty.value"
                  :value="difficulty.value"
                  :label="difficulty.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="标签">
              <el-select v-model="formData.tags">
                <el-option
                  v-for="tag in tags"
                  :key="tag.value"
                  :label="tag.label"
                  :value="tag.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="方向">
              <el-select v-model="formData.direction">
                <el-option
                  v-for="(direction, index) in directions"
                  :key="index"
                  :value="direction"
                  :label="direction"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="城市">
              <el-row type="flex">
                <el-col>
                  <el-select
                    v-model="formData.province"
                    @change="querycitys"
                    placeholder="市"
                  >
                    <el-option
                      v-for="(province, index) in provinces"
                      :key="index"
                      :value="province"
                      :label="province"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select v-model="formData.city" placeholder="区/县">
                    <el-option
                      v-for="(city, index) in citys"
                      :key="index"
                      :value="city"
                      :label="city"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="关键字">
              <el-input
                placeholder="根据题干搜索"
                v-model="formData.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="录入人">
              <el-select v-model="formData.creatorID">
                <el-option
                  v-for="creator in creators"
                  :key="creator.id"
                  :value="creator.id"
                  :label="creator.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-row type="flex">
                <el-col></el-col>
                <el-col>
                  <el-button size="small" @click="cleanformData"
                    >清除</el-button
                  >
                  <el-button type="primary" size="small" @click="submit"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { simple as getsubSimpleList } from "@/api/hmmm/subjects";
import { simple as getdirSimpleList } from "@/api/hmmm/directorys";
import { simple as gettagSimpleList } from "@/api/hmmm/tags";
import { simple as getuserSimpleList } from "@/api/base/users";
import { provinces, citys } from "@/api/hmmm/citys";
import { direction, difficulty, questionType } from "@/api/hmmm/constants";
export default {
  data() {
    return {
      formData: {
        subjectID: ``,
        catalogID: ``,
        questionType: ``,
        remarks: ``,
        difficulty: ``,
        shortName: ``,
        tags: ``,
        keyword: ``,
        direction: ``,
        creatorID: ``,
        province: ``,
        city: ``,
      },
      subjects: [],
      directorys: [],
      tags: [],
      directions: [],
      questionTypes: [],
      creators: [],
      provinces: [],
      citys: [],
    };
  },
  created() {
    this.isChoice ? console.log(`choice`) : console.log(`list`);
    this.loadsubjectsList();
    this.loadcreatorsList();
    this.loadprovinces();
    this.directions = direction;
    this.difficultys = difficulty;
    this.questionTypes = questionType;
  },
  methods: {
    /* 初始渲染学科列表 */
    async loadsubjectsList() {
      const { data: res } = await getsubSimpleList();
      this.subjects = [...res];
    },

    async queryDirtandTags(subjectId) {
      this.doquery(subjectId);
    },
    async doquery(subjectId) {
      await this.querydirectorys(subjectId);
      await this.querytags(subjectId);
    },
    /* 获取目录简单列表 */
    async querydirectorys(subjectID) {
      this.formData.catalogID = ``;
      const { data: res } = await getdirSimpleList({ subjectID });
      console.log(res);
      this.directorys = [...res];
    },
    /* 获取标签简单列表 */
    async querytags(subjectID) {
      this.formData.tags = ``;
      const { data: res } = await gettagSimpleList({ subjectID });
      console.log(`标签`, res);
      this.tags = res;
    },
    /* 录入人列表 */
    async loadcreatorsList() {
      const { data: res } = await getuserSimpleList();
      console.log(res);
      this.creators = res;
    },
    loadprovinces() {
      this.provinces = provinces();
    },
    querycitys(province) {
      this.citys = citys(province);
    },
    submit() {
      const formdatainfo = Object.keys(this.formData).reduce((init, key) => {
        this.formData[key] ? (init[key] = this.formData[key]) : ``;
        return init;
      }, {});
      /* 上传提交的信息 */
      this.$emit(`querydatainfo`, formdatainfo);
    },
    cleanformData() {
      const keys = Object.keys(this.formData);
      keys.forEach((key) => {
        this.formData[key] = ``;
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.inputwidth {
  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
}
</style>